<template>
  <view class="login-container">
    <uni-icons class="login-icon" type="contact-filled" size="90"></uni-icons>
    <button type="warn" class="btn-login" @click="getUserInfo">一键登录</button>
    <text class="text">登录享更多权益</text>
  </view>
</template>

<script>
  import {
    showMsg
  } from '../../utils/interact/index.js'
  import {
    escook
  } from '../../utils/escook/index.js'
  import {
    mapMutations
  } from 'vuex';
  export default {
    name: "my-login",
    data() {
      return {
      demo:'hahha'
      };
    },
    methods: {
      ...mapMutations('m_user', ['updateToken']),
      //获取用户信息
      getUserInfo(e) {
        const that = this;
        uni.getUserProfile({
          desc: '用于完善会员资料',
          success(succ) {
            //发起登录请求获取token
            that.getToken(succ);
          },
          fail(err) {
            console.error(err)
          },
        })
      },

      //访问登录接口获取token
      getToken(succ) {
        //解构得到登录请求需要的参数
        const {
          encryptedData,
          iv,
          rawData,
          signature
        } = succ

        const that = this;
        //调用uni.login()获取临时登录凭证code
        uni.login({
          provider: 'weixin',
          onlyAuthorize: true,
          async success(res) {

            const {
              code
            } = res;

            const query = {
              code,
              encryptedData,
              iv,
              rawData,
              signature
            }
            //发起网络请求
            const {
              data: loginRes
            } = await escook.post('api/public/v1/users/wxlogin', query);
            // if (loginRes.meta.status !== 200) return showMsg('登录失败');
            
            // that.updateToken(loginRes.message.token);
            that.updateToken('shjk');
          },
          fail(err) {
            console.error(err)
          },
        });
      },
    },
  }
</script>

<style lang="scss">
  .login-container {
    width: 100vw;
    height: 86vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f2f2f2;
    position: relative;
    overflow: hidden;

    &::after {
      content: ' ';
      display: block;
      width: 100%;
      height: 40px;
      background-color: #f5f5f5;
      position: absolute;
      bottom: 0%;
      left: 0%;
      border-radius: 100%;
      transform: translateY(50%);
    }

    .login-icon {}

    .btn-login {
      width: 80%;
      border-radius: 20px;
      margin-bottom: 5px;
    }

    .text {
      color: gray;
      font-size: 32rpx
    }
  }
</style>